import React, { useEffect } from "react"
import chatStore from '../../store/ChatStore'
import systemStore from '../../store/SystemStore'

import { Department } from "../../interface/IGroup";
import { Collapse, Input } from "antd";
import { AvatorWithPhoto } from "../avatorWithPhoto/AvatorWithPhoto";
import Radio from "antd/es/radio";
import './SelectService.less'
import TextArea from "antd/lib/input/TextArea";
import SvgIcon from "../svgIcon/SvgIcon";
import { isArray, select } from "underscore";
interface ISelectServiceProps {
    // 转接客服
    key?:string,
    onChange?:(info:{ userId:number, remark?:string })=>void,
    reload?:boolean,
    onLoadData?:()=>void
}
// 选择客服
const SelectService = ( props:ISelectServiceProps ) => {
    const [data, setData] = React.useState<Department[]>([]);
    const [selectedUserId, setSelectUserId] = React.useState<any>(0);
    const [key, setKey] = React.useState<any>(0);
    const [remark, setRemark] = React.useState<any>('');
    
    useEffect(()=>{
      selectUser(systemStore.user.userId)
    }, [data])
    useEffect(()=>{
      if( props.reload ){
        setData([])
        const data = chatStore.getUserServicesList().then(res=>{
          setData(res.data)
        })
      }
    }, [props.reload])

    const getSelectedPanel = ()=>{
      
    }
    const selectUser = (id:number=0)=>{
      if( !Array.isArray(data) || data.length === 0){
        return
      }
      const users = data.reduce((pre,cur)=>{
        return pre.concat(cur.employees||[])
      },[])
      if( !id ){
        if( users.length > 0){
          id = users[0].userId
        }
      }else{
        const user = users.find(item=>item.userId === id)
        if(!user){
          id = users[0].userId
        }
      }
      if( id ){
        setSelectUserId(id)
        props.onChange && props.onChange({
          userId:id,
          remark:remark
        })
      }
    }
    
    const transCallList = data;
    const customPanelStyle = {
      background: '#F9FAFB',
      borderRadius: 4,
      border: 0,
      overflow: 'hidden',
    };
    
    return (
        <div className='select-service'>
          <div className="select-service-main">
            <div className='select-service-title'>
                <Input
                  // suffix={
                  //   store.showClear ? <Icon type="close-circle" theme="filled" style={{ color: '#8CA6F5' }} onClick={()=>store.setShowClearSearch(false)} /> : null
                  // }
                  size={"default"}
                  placeholder="搜索客服昵称或ID"
                  maxLength={30}
                  onChange={(e)=>{
                    setKey(e.target.value)
                  }}
                  prefix={<SvgIcon size="12" name="search"></SvgIcon>}
                  className="custom-input-gray"
                />
              </div>
              <div className="select-service-middle">
              
                {
                  
                  transCallList.map((depart:Department,index:number)=>{
                    return <Collapse bordered={false} defaultActiveKey={['0']} key={index}>
                      <Collapse.Panel header={depart.departName} key={index} style={customPanelStyle}>
                        {
                          (depart.employees||[]).map((item,id)=>{
                            if( key && item.nickname.indexOf(key) === -1 && item.id.indexOf(key) === -1 ){
                              return null
                            }
                            const isMe = item.userId == systemStore.user.userId;
                            let className = 'service-item';
                            if( item.userId == selectedUserId ){
                              className += ' service-item-selected'
                            }
                            if( isMe ){
                              className += ' service-item-disabled'
                            }
                            return <div className={className} key={id}>
                              <div className="wrapper">

                                <Radio name='serviceId' checked={item.userId==selectedUserId?true:false} onChange={(e)=>{
                                  if( isMe ){
                                    return
                                  }
                                  selectUser(item.userId)
                                }}>
                                  <div className="radio-content">
                                    <AvatorWithPhoto style={{width:'32px',flexShrink:0}} onlineStyle={'dot'} type={item.type} id={item.id} classN="head" onlinestate={item.onlinestate}  />
                                    <div className="info">
                                      <div className="name">{item.nickname}{isMe?'(我)':''}</div>
                                      <div className="status">接待中：(0/1)</div>
                                    </div>
                                  </div>
                                </Radio>
                              </div>

                              
                            </div>
                          })
                        }
                        
                      </Collapse.Panel>
                    </Collapse>
                  })
                }
              </div>
            </div>
            
            <div className="select-service-bottom">
              <h3>转接备注</h3>
              <TextArea onChange={(e)=>{
                setRemark(e.target.value)
                props.onChange && props.onChange({
                  userId:selectedUserId,
                  remark:e.target.value
                })
              }} />
            </div>
        </div>

    )
}

export default SelectService
